<template>
  <vxe-colgroup
    v-if="hasChildren"
    v-bind="tableItem"
    :field="tableItem.prop"
    :title="tableItem.label"
  >
    <template #header="props" v-if="__hasSlot('header')">
      <RenderVNode
        :vnodes="__getSlot('header', props)"
      ></RenderVNode>
    </template>
    <template
      v-for="(item,index) in tableItem.children"
    >
      <TableItem
        v-if="itemShow(item,vm)"
        :key="'tableItem.children'+index"
        :vm="vm"
        :tableItem="item"
      ></TableItem>
    </template>
  </vxe-colgroup>
  <CheckBox
    v-else-if="tableItem.type === 'checkbox'"
    v-bind="$props"
  ></CheckBox>
  <vxe-column
    v-else
    v-bind="tableItem"
    :field="tableItem.prop"
    :title="tableItem.label"
    :type="getItemType(tableItem)"
    :formatter="itemFormatter(tableItem)"
  >
    <template #default="props" v-if="__hasSlot('default')">
      <RenderVNode
        :vnodes="__getSlot('default', props)"
      ></RenderVNode>
    </template>
    <template #header="props" v-if="__hasSlot('header')">
      <RenderVNode
        :vnodes="__getSlot('header', props)"
      ></RenderVNode>
    </template>
    <template #footer="props" v-if="__hasSlot('footer')">
      <RenderVNode
        :vnodes="__getSlot('footer', props)"
      ></RenderVNode>
    </template>
    <template #title="props" v-if="__hasSlot('title')">
      <RenderVNode
        :vnodes="__getSlot('title', props)"
      ></RenderVNode>
    </template>
    <template #radio="props" v-if="__hasSlot('radio')">
      <RenderVNode
        :vnodes="__getSlot('radio', props)"
      ></RenderVNode>
    </template>
    <template #content="props" v-if="__hasSlot('content')">
      <RenderVNode
        :vnodes="__getSlot('content', props)"
      ></RenderVNode>
    </template>
    <template #filter="props" v-if="__hasSlot('filter')">
      <RenderVNode
        :vnodes="__getSlot('filter', props)"
      ></RenderVNode>
    </template>
    <template #edit="props" v-if="__hasSlot('edit')">
      <RenderVNode
        :vnodes="__getSlot('edit', props)"
      ></RenderVNode>
    </template>
  </vxe-column>
</template>

<script>
import typeOfUtils from "../../utils/type-of-utils";
import {CommonMixin} from "./Utils/CommonMixin";
import {
  TableItemOtherCommonMixin
} from "./Utils/TableItemOtherCommonMixin";

export default {
  name: "TableItem",
  components: {
    CheckBox:()=>import('./TableItemOther/Checkbox.vue')
  },
  mixins:[CommonMixin,TableItemOtherCommonMixin],
  computed: {
    hasChildren() {
      return typeOfUtils.isNotEmpty(this.tableItem.children)
    }
  },
  data() {
    return {
      typeOfUtils,
    }
  },
  methods: {
    getItemType(item) {
      if (item.type === 'index') {
        return 'seq'
      }
      return item.type
    },
  }
}
</script>

<style scoped lang="scss">

</style>
